<template>
  <div class="article-detail-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容区域 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="list_box" v-if="article">
            <!-- 返回按钮 -->
            <div class="mb-3">
              <router-link 
                :to="article.category === 'knowledge' ? '/pet-column/knowledge' : '/pet-column/news'" 
                class="btn btn-secondary"
              >
                <i class="fas fa-arrow-left"></i> 返回{{ article.category === 'knowledge' ? '养宠知识' : '宠物新闻' }}
              </router-link>
            </div>
            
            <h2 class="left_h2">{{ article.category === 'knowledge' ? '养宠知识' : '宠物新闻' }}</h2>
            
            <div class="contents">
              <h1 class="contents_title">{{ article.title }}</h1>
              <div class="entry-meta">
                <span><strong>日期：</strong><strong>{{ formatFullDate(article.date) }}</strong></span>
                <span><strong>作者：</strong><strong>{{ article.author }}</strong></span>
                <span><strong>浏览：</strong><strong>{{ article.views }}</strong></span>
              </div>
              
              <div id="picContent" class="article-content">
                <div v-html="formatContent(article.content)"></div>
              </div>
            </div>
            
            <!-- 上一篇/下一篇导航 -->
            <div class="point">
              <span class="to_prev col-xs-12 col-sm-6 col-md-6">
                上一篇：
                <router-link 
                  v-if="prevArticle" 
                  :to="`/pet-column/article/${prevArticle.id}`"
                >
                  {{ prevArticle.title }}
                </router-link>
                <span v-else>没有了！</span>
              </span>
              <span class="to_next col-xs-12 col-sm-6 col-md-6">
                下一篇：
                <router-link 
                  v-if="nextArticle" 
                  :to="`/pet-column/article/${nextArticle.id}`"
                >
                  {{ nextArticle.title }}
                </router-link>
                <span v-else>没有了！</span>
              </span>
            </div>
          </div>
          
          <!-- 猜你喜欢 -->
          <div class="list_related" v-if="relatedArticles.length">
            <h2 class="left_h2">猜你喜欢</h2>
            <ul class="list_news related_news">
              <li v-for="relatedArticle in relatedArticles" :key="relatedArticle.id">
                <router-link 
                  :to="`/pet-column/article/${relatedArticle.id}`" 
                  :title="relatedArticle.title"
                >
                  {{ relatedArticle.title }}
                </router-link>
                <span class="news_time">{{ formatDate(relatedArticle.date) }}</span>
              </li>
            </ul>
          </div>
          
          <!-- 404 提示 -->
          <div v-else-if="!article" class="not-found">
            <div class="text-center">
              <h2>文章未找到</h2>
              <p>抱歉，您访问的文章不存在。</p>
              <router-link to="/pet-column" class="btn btn-primary">
                返回宠物栏目
              </router-link>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <!-- 导航菜单 -->
          <div class="left_nav" id="categories">
            <h2 class="left_h2">宠物栏目</h2>
            <ul class="left_nav_ul" id="firstpane">
              <li>
                <router-link 
                  class="biglink" 
                  :class="{ curr: article && article.category === 'knowledge' }"
                  to="/pet-column/knowledge"
                >
                  养宠知识
                </router-link>
              </li>
              <li>
                <router-link 
                  class="biglink" 
                  :class="{ curr: article && article.category === 'news' }"
                  to="/pet-column/news"
                >
                  宠物新闻
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 搜索框 -->
          <form @submit.prevent="performSearch">
            <div class="input-group search_group">
              <input 
                type="text" 
                v-model="searchKeyword"
                class="form-control input-sm" 
                placeholder="信息查询"
              >
              <span class="input-group-btn">
                <button @click="performSearch" class="btn btn-sm mysearch_btn" type="button">
                  搜 索
                </button>
              </span>
            </div>
          </form>
          
          <!-- 养宠知识 -->
          <div class="left_news">
            <h2 class="left_h2">养宠知识</h2>
            <ul>
              <li v-for="knowledge in knowledgeArticles.slice(0, 5)" :key="knowledge.id">
                <router-link :to="`/pet-column/article/${knowledge.id}`" :title="knowledge.title">
                  {{ knowledge.title }}
                </router-link>
                <span class="news_time">{{ formatDate(knowledge.date, true) }}</span>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="left_contact">
            <h2 class="left_h2" style="margin-bottom:20px;">联系我们</h2>
            <p>联系人：贫僧</p>
            <p>手机：暂无</p>
            <p>电话：暂无</p>
            <p>邮箱：暂无</p>
            <p>地址：暂无</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetail',
  data() {
    return {
      article: null,
      searchKeyword: '',
      relatedArticles: [],
      prevArticle: null,
      nextArticle: null,
      allArticles: [
        // 宠物新闻
        {
          id: 1,
          title: '抵制大规模捕杀流浪狗',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 59572,
          content: `一场针对无辜流浪狗的猎杀正在进行！在全国各地，很多人加入了这场针对流浪狗的屠杀！这其中有很多人只是为了宣泄自己的情绪。这是由一根缺失的牵引绳引发的悲剧，是由一个不文明养犬人引发的惨案。因为一个人，一只狗，就会有无数只无辜的生命为之买单！

文明社会，不应该发生这样的悲剧！请停止这场没有理由的屠杀！现在罗威纳犬伤女童事件正在走向一个偏激的、极端的方向，各地针对流浪狗展开了残忍的杀害。我们不明白，难道遇到问题我们就只会用这种简单粗暴的方法来解决吗？我们难道只会用屠杀流浪狗这个弱势群体的办法来解决问题吗？

难道这些残忍对流浪狗下死手的人还不明白，狗本身没办法为自己负责，那些遗弃虐待的，那些不规范养犬的才是罪魁祸首！如果真的想源头阻断悲剧的发生，这场被声讨的对象，不应该是无辜的狗，而是他们的主人！还有我们平时不管不问，出了问题就想杀狗转移矛盾的管理机关！

事实上多数的犬只伤人事件都是可避免的！只是需要我们的管理部门、养犬人，甚至受害者共同努力！如今这场猎杀不仅是残忍的，而且是无用的。除了让负面舆论情绪得到释放，没有任何好处！更为可怕的是，现在互联网上似乎形成了一种非常偏激的声音，不仅搞杀狗的连坐，甚至还要给家养犬投毒，到普通养狗人那里去抢杀别人的家养犬只！甚至他们连保护了人民群众的生命财产安全的警犬和搜救犬都不放过！

借着罗威纳伤人这个事件，他们肆意作乱！肆意放大社会矛盾！所以这场针对狗的屠杀，到底是为了什么？我们看到，不是所有人都在解决问题，反而是有人推波助澜，肆意放大舆论，释放内心的邪恶，让养宠人恐惧，让有爱心的人恐惧，让无辜的流浪狗失去生命！我们本身缺乏保护和守护这些生命的法律，而如今，一个舆论就可以让各地展开对他们的屠杀！何其可悲！

请放过这些无辜的生命吧！放过那些本就生存艰难的流浪猫狗们，它们卑微的生活在城市的角落，为了活下去甚至远离人群，而一旦发生风吹草动，第一个遭殃的就是它们！与其屠杀，我们可以选择更加温暖的方法。我们周围有多少默默救助的流浪动物收容基地，以及流浪动物的群护人，他们自己不断推广绝育和领养，给流浪的小生命们一个重新回家的机会！

今天这句话可以放在这里，对任何流浪动物的屠杀，不会对社会正向养犬有任何推动，只会催化社会的矛盾，让人心生绝望！而偏激的舆论只会让事实颠倒，希望我们可以秉持着对生命尊重的态度，不要用杀戮来解决问题！罗威纳犬，本身只是一个犬种，如果放在对的位置，它们就是为人类冲锋陷阵的勇士！

正如一位网友所说，没有人在救火现场嫌弃一只狗是罗威纳，地震时候的搜救犬，边境的缉毒犬，盲人的导盲犬，它们所作出的奉献不少于任何人，为什么要因为一个不负责任的宠物主人，就要对所有的无辜毛孩子发起伤害！

而且流浪猫狗本身的源头来自人的遗弃虐待，当他们受伤害躺在地上慢慢等死，当它们被人抛弃无家可归，当它们艰难的在这个时间寻找一个活下去的机会，我们有几个人给过它们关注，而对它们的杀戮却如此急迫！它们到底做错了什么，还是人类已经狂妄自大到忘记要保护弱小，随意为了自己的喜好杀害无辜的生命！

必须停止这场残忍的屠杀！这场屠杀不会解决问题，只会释放仇恨的戾气！只有通过爱和理解，而不是暴力，才能解决问题！转发出去！一起为无辜的狗子发声！不要用悲剧来弥补悲剧！这一切的错，从来都不是无辜的流浪狗！`
        },
        {
          id: 2,
          title: '虐待动物行为入法有望',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 42356,
          content: `近日，关于虐待动物行为入法的讨论再次引起社会关注。专家表示，将虐待动物行为纳入法律范围，对于保护动物权益具有重要意义。

根据相关专家的分析，虐待动物行为入法将从以下几个方面发挥作用：首先，明确虐待动物的法律定义和处罚标准，为执法部门提供明确的法律依据；其次，通过法律手段提高虐待动物的成本，形成有效的威慑作用。

目前，我国在动物保护方面的法律相对滞后，主要依靠《治安管理处罚法》等法规进行管理，但处罚力度相对较轻。而在一些发达国家，虐待动物已被明确列为刑事犯罪。

业内人士认为，虐待动物行为入法不仅有助于保护动物权益，还能够促进社会文明进步。研究表明，虐待动物与其他暴力犯罪之间存在一定的关联性，及早干预虐待动物行为有助于预防更严重的犯罪。

不过，在立法过程中也需要考虑多个方面的平衡，包括传统文化、经济发展水平、执法能力等因素。专家建议，可以先从严重的虐待动物行为开始立法，逐步完善相关法律体系。

社会各界对此也表达了不同的看法，动物保护组织强烈支持相关立法，认为这是动物权益保护的重要进步。而一些传统行业的从业者则担心过严的法律可能影响正常的生产经营活动。

无论如何，动物保护法律的完善已经成为社会发展的必然趋势。相信在各方的共同努力下，我国的动物保护法律体系将会不断完善，为建设文明和谐的社会贡献力量。`
        },
        {
          id: 3,
          title: '中国狂犬病防治项目再起航',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 38921,
          content: `中国狂犬病防治项目正式启动新一轮防治工作，旨在通过科学的方法降低狂犬病的发生率，保障人民群众的生命安全。

根据世界卫生组织的数据，狂犬病是一种可预防但几乎100%致死的疾病。在我国，狂犬病的发病率虽然近年来有所下降，但仍然是需要重点关注的公共卫生问题。

此次防治项目采用"源头控制+预防接种+健康教育"的综合防控策略。在源头控制方面，将加强对流浪犬的管理，推广犬只免疫接种，建立完善的动物疫情监测体系。

预防接种方面，将继续完善人用狂犬病疫苗的供应保障体系，确保疫苗质量和接种安全。同时，加强对高风险人群的主动免疫接种，如兽医、动物管理人员等。

健康教育是防治工作的重要组成部分。项目将通过多种渠道普及狂犬病防治知识，提高公众的防护意识。重点宣传被动物咬伤后的正确处理方法，包括及时清洗伤口、接种疫苗等。

项目还将加强国际合作，学习借鉴其他国家的成功经验。特别是在边境地区，将与周边国家建立联防联控机制，共同防控跨境传播风险。

专家表示，狂犬病防治是一项长期的系统工程，需要政府、社会和个人的共同参与。只有建立完善的防控体系，才能有效降低狂犬病的威胁。

此次项目的启动，标志着我国狂犬病防治工作进入了一个新的阶段。相信通过各方的共同努力，我国的狂犬病防治水平将会显著提升，为保障人民群众的生命健康作出重要贡献。`
        },
        {
          id: 4,
          title: '中国小动物保护协会新团队成立',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 35467,
          content: `中国小动物保护协会宣布成立新的专业团队，将致力于流浪动物救助、宠物保护等相关工作，为小动物的福利保障提供更专业的服务。

新成立的团队包括兽医专家、动物行为学家、法律顾问、志愿者管理专家等多个专业领域的人员。他们将在动物救助、医疗救治、行为矫正、法律咨询等方面提供专业支持。

协会负责人表示，成立专业团队是为了更好地应对当前动物保护工作中面临的各种挑战。随着社会对动物保护意识的提高，相关工作的专业化要求也越来越高。

团队的主要工作内容包括：建立标准化的动物救助流程，提高救助效率和成功率；开展动物医疗救治工作，为伤病动物提供及时的医疗服务；进行动物行为评估和矫正，帮助动物更好地适应新环境。

此外，团队还将负责志愿者的培训和管理工作。通过系统的培训，提高志愿者的专业技能和服务水平，确保动物保护工作的质量和安全。

法律咨询服务也是团队的重要工作之一。随着动物保护相关法律的不断完善，团队将为公众提供法律咨询，协助处理动物保护相关的法律问题。

协会还计划与高等院校、科研机构建立合作关系，开展动物保护相关的研究工作，为政策制定和实践工作提供科学依据。

团队成立后，将首先在北京、上海、广州等重点城市开展工作，逐步扩展到全国其他地区。预计在未来三年内，团队将覆盖全国主要城市。

社会各界对新团队的成立表示欢迎和支持。动物保护志愿者认为，专业团队的成立将大大提升动物保护工作的效率和质量。

这一举措标志着我国动物保护事业正在向更加专业化、规范化的方向发展，为建设人与动物和谐共存的社会环境奠定了重要基础。`
        },
        {
          id: 5,
          title: '国家农业部官宣：猫犬属于非食用动物',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 56789,
          content: `国家农业部正式发布公告，明确规定猫、犬等伴侣动物属于非食用动物，此举对于保护动物权益具有里程碑意义。

这一公告的发布，结束了长期以来关于猫犬是否属于食用动物的争议。公告明确指出，随着人类文明进步和公众对动物保护意识的增强，猫犬已从传统的牲畜转变为伴侣动物，不应被列为食用动物。

公告的法律依据包括《畜牧法》、《动物防疫法》等相关法律法规。根据这些法律的规定，国家对不同类别的动物实行分类管理，明确区分食用动物和非食用动物。

这一决定得到了国际社会的广泛关注和认可。世界动物保护协会表示，这是中国在动物保护方面迈出的重要一步，体现了一个负责任大国的担当。

对于相关行业的影响，专家表示这一规定将促进相关产业的转型升级。一些原本从事相关行业的人员可以转向宠物服务、动物医疗等新兴行业。

公告还强调了加强执法监督的重要性。相关部门将加大执法力度，严厉打击违法违规行为，确保公告的有效执行。

动物保护组织对此表示热烈欢迎，认为这是动物权益保护的重大胜利。他们表示将继续推动更多动物保护相关法律的完善。

公众对这一决定也表示支持。调查显示，超过80%的受访者支持将猫犬列为非食用动物，认为这符合现代文明社会的价值观念。

专家指出，这一公告的发布不仅具有法律意义，更具有重要的社会文化意义。它反映了我国社会文明程度的提升和动物保护意识的增强。

未来，相关部门还将制定更详细的实施细则，确保公告的有效落实。同时，也将加强宣传教育，提高公众对动物保护的认识和理解。

这一历史性的决定，必将在我国动物保护事业发展史上留下浓墨重彩的一笔，为建设人与动物和谐共存的美好社会奠定坚实基础。`
        },
        {
          id: 6,
          title: '流浪动物之家成立了',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 29834,
          content: `流浪动物之家正式成立，这是一个专门为流浪动物提供救助、医疗、领养服务的综合性平台。

流浪动物之家的成立，源于社会各界对流浪动物问题的关注和关爱。随着城市化进程的加快，流浪动物数量不断增加，它们的生存状况令人担忧。

该机构配备了专业的兽医团队、动物护理人员和志愿者队伍。设施包括动物医院、康复中心、领养中心等，能够为流浪动物提供全方位的服务。

救助工作是流浪动物之家的核心业务。工作人员会定期巡查城市各个角落，主动寻找需要帮助的流浪动物。对于伤病动物，会立即提供医疗救治。

医疗服务方面，机构配备了先进的医疗设备和专业的兽医团队。除了基本的治疗服务外，还提供绝育手术、疫苗接种、健康检查等预防性医疗服务。

领养服务是帮助流浪动物找到新家庭的重要环节。机构建立了完善的领养程序，包括动物健康评估、潜在领养人资格审查、领养后跟踪服务等。

教育宣传也是机构的重要工作内容。通过举办各种活动，向公众普及动物保护知识，提高人们对流浪动物问题的认识和关注。

机构还与政府部门、其他动物保护组织建立了合作关系，形成了救助流浪动物的合力。通过资源整合和经验分享，提高整体工作效率。

志愿者是机构重要的力量支撑。目前已有数百名志愿者参与到各项工作中，他们来自社会各个阶层，用自己的爱心为流浪动物奉献着力量。

资金来源主要包括社会捐赠、企业赞助、政府补贴等。机构承诺将严格管理资金使用，确保每一分钱都用在流浪动物身上。

成立仪式上，相关领导表示，流浪动物之家的成立是城市文明建设的重要组成部分，希望能够为解决流浪动物问题提供有效的解决方案。

流浪动物之家的成立，为城市中的流浪动物点亮了希望之光，也为建设人与动物和谐共存的美好城市迈出了重要一步。`
        },
        // 养宠知识 (保留之前的详细内容)
        {
          id: 7,
          title: '猫为什么会炸毛',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物专家',
          views: 45623,
          content: `猫咪炸毛是一种自然的生理反应，通常出现在感到威胁、兴奋或恐惧的时候。了解猫咪炸毛的原因有助于更好地理解和照顾我们的猫咪朋友。

当猫咪感到害怕或受到威胁时，它们会本能地让毛发竖立起来，这样可以让自己看起来更大更可怕，以此来威慑潜在的敌人。这种反应是猫科动物的天性，不仅家猫会这样，野生的大型猫科动物也有同样的行为。

除了恐惧和威胁，猫咪在极度兴奋时也可能会炸毛。比如在玩耍时突然听到奇怪的声音，或者看到陌生的动物时。这种情况下的炸毛通常伴随着弓背、侧身站立等姿势。

作为主人，当我们看到猫咪炸毛时，应该首先观察周围环境，找出可能导致猫咪紧张的因素。如果是因为恐惧，我们应该保持冷静，轻声安慰猫咪，不要强行接近或抱起它，这可能会让它更加紧张。

如果猫咪经常无缘无故地炸毛，可能是压力过大或健康问题的表现，建议及时咨询兽医师。

了解猫咪的这种行为特征，有助于我们更好地与猫咪相处，为它们提供一个安全舒适的生活环境。`
        },
        {
          id: 8,
          title: '如何正确训练小狗大小便',
          date: '2025-09-13',
          category: 'knowledge',
          author: '训犬师',
          views: 67890,
          content: `训练小狗正确的大小便习惯是养狗的基础课程。通过正确的方法和耐心的训练，可以让小狗养成良好的卫生习惯。

首先，要为小狗建立固定的排便区域。可以在家中选择一个通风良好、容易清理的地方，铺上专用的狗狗尿垫或报纸。这个区域要保持相对固定，让小狗形成条件反射。

观察小狗的排便信号也很重要。通常，小狗在饭后30分钟到1小时内，或者刚醒来时最容易排便。当发现小狗在地上嗅来嗅去、转圈或者显得不安时，就要立即将它带到指定区域。

当小狗在正确的地方排便时，要立即给予奖励和表扬。可以用温柔的语调说"好棒"、"乖狗狗"等，或者给一些小零食作为奖励。正面强化比惩罚更有效。

如果小狗在错误的地方排便，不要大声斥责或惩罚，这样可能会让它害怕排便。应该立即清理干净，用除臭剂去除气味，防止小狗再次在同一地点排便。

训练需要耐心和一致性。通常需要几周到几个月的时间才能完全训练成功，主人要保持耐心，不要因为一时的失败而放弃。

记住，每只小狗的学习能力和节奏都不同，要根据自己狗狗的特点调整训练方法。`
        }
      ],
      knowledgeArticles: [
        {
          id: 7,
          title: '猫为什么会炸毛',
          date: '2025-09-13',
          category: 'knowledge'
        },
        {
          id: 8,
          title: '如何正确训练小狗大小便',
          date: '2025-09-13',
          category: 'knowledge'
        },
        {
          id: 9,
          title: '宠物疫苗接种完整指南',
          date: '2025-09-13',
          category: 'knowledge'
        },
        {
          id: 10,
          title: '如何选择适合的宠物食品',
          date: '2025-09-13',
          category: 'knowledge'
        },
        {
          id: 11,
          title: '宠物洗澡的正确方法',
          date: '2025-09-13',
          category: 'knowledge'
        }
      ]
    }
  },
  created() {
    this.loadArticle()
  },
  watch: {
    '$route'() {
      this.loadArticle()
    }
  },
  methods: {
    loadArticle() {
      const id = parseInt(this.$route.params.id)
      this.article = this.allArticles.find(a => a.id === id)
      
      if (this.article) {
        // 增加浏览量
        this.article.views += 1
        
        // 获取相关文章（同类别的其他文章）
        this.relatedArticles = this.allArticles
          .filter(a => a.id !== id && a.category === this.article.category)
          .slice(0, 5)
        
        // 获取上一篇和下一篇文章（同类别）
        const sameCategory = this.allArticles.filter(a => a.category === this.article.category)
        const currentIndex = sameCategory.findIndex(a => a.id === id)
        
        this.prevArticle = currentIndex > 0 ? sameCategory[currentIndex - 1] : null
        this.nextArticle = currentIndex < sameCategory.length - 1 ? sameCategory[currentIndex + 1] : null
      }
    },
    
    formatContent(content) {
      // 将换行符转换为段落
      return content.split('\n\n').map(paragraph => 
        `<p style="font-size: 16px; line-height: 1.8; margin-bottom: 16px; text-align: justify;">${paragraph.replace(/\n/g, '<br>')}</p>`
      ).join('')
    },
    
    formatFullDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    },
    
    formatDate(dateString, short = false) {
      const date = new Date(dateString)
      if (short) {
        return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
      }
      return date.toLocaleDateString('zh-CN')
    },
    
    performSearch() {
      if (this.searchKeyword.trim()) {
        this.$router.push({ 
          path: '/pet-column', 
          query: { search: this.searchKeyword } 
        })
      }
    }
  }
}
</script>

<style scoped>
.article-detail-page {
  padding-top: 0; /* 使用全局body padding-top */
}

.page_bg {
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 30px;
}

.list_box, .list_related {
  background: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_h2 {
  color: #04A07B;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #04A07B;
}

.contents {
  margin: 20px 0;
}

.contents_title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.4;
}

.entry-meta {
  margin-bottom: 30px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #04A07B;
}

.entry-meta span {
  margin-right: 30px;
  color: #666;
  font-size: 14px;
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.article-content p {
  margin-bottom: 16px;
  text-align: justify;
}

.point {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
}

.to_prev, .to_next {
  padding: 10px 0;
  color: #666;
  font-size: 14px;
}

.to_prev a, .to_next a {
  color: #04A07B;
  text-decoration: none;
}

.to_prev a:hover, .to_next a:hover {
  text-decoration: underline;
}

.to_next {
  text-align: right;
}

.list_news {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list_news li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list_news li:last-child {
  border-bottom: none;
}

.list_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 15px;
  line-height: 1.5;
}

.list_news a:hover {
  color: #04A07B;
}

.news_time {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
}

/* 侧边栏样式 */
.left_nav, .left_news, .left_contact {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  border-bottom: 1px solid #eee;
}

.left_nav_ul li:last-child {
  border-bottom: none;
}

.biglink {
  display: block;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.biglink:hover {
  color: #04A07B;
}

.biglink.curr {
  color: #04A07B;
  font-weight: bold;
}

.search_group {
  margin-bottom: 20px;
}

.mysearch_btn {
  background: #04A07B;
  color: white;
  border: none;
}

.mysearch_btn:hover {
  background: #038066;
}

.left_news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_news li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_news li:last-child {
  border-bottom: none;
}

.left_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 10px;
  font-size: 14px;
}

.left_news a:hover {
  color: #04A07B;
}

.left_contact p {
  margin-bottom: 8px;
  color: #666;
}

.not-found {
  background: white;
  padding: 50px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .col-xs-12.col-sm-8.col-md-9 {
    float: none !important;
    order: 2;
  }
  
  .col-xs-12.col-sm-4.col-md-3 {
    order: 1;
    margin-bottom: 20px;
  }
  
  .article-detail-page {
    padding-top: 0; /* 使用全局body padding-top */
  }
  
  .list_box, .list_related {
    padding: 20px;
  }
  
  .contents_title {
    font-size: 24px;
  }
  
  .entry-meta span {
    margin-right: 15px;
    display: block;
    margin-bottom: 5px;
  }
  
  .to_prev, .to_next {
    text-align: left !important;
    width: 100%;
  }
}
</style>
